<template>
    <div class="goods-wrapper">
        <div class="goods-top">
            <div  style="flex: 1;">
                <div class="goods-img" style="margin-left: 10px">
                    <img src="../assets/04.png" alt="">
                </div>
            </div>
            <div style="flex: 2.5;display: flex;flex-flow: column;justify-content: space-around;margin-left: 10px">
                <div style="font-size: 16px;font-weight: bold">不好吃面团(大连店)</div>
                <div style="font-size: 12px">
                    <div style="display: flex;">
                        <div>
                            <i class="el-icon-star-on" style="color: gold"></i>
                            <i class="el-icon-star-on" style="color: gold"></i>
                            <i class="el-icon-star-on" style="color: gold"></i>
                            <i class="el-icon-star-on" style="color: gold"></i>
                            <i class="el-icon-star-on" style="color: gold"></i>
                        </div>
                        <div style="color: gray"><span>4.9</span>
                            <span>月售1111单</span></div>
                    </div>
                    <div>
                        <div style="margin-top: 5px;color: gray">
                            <span>￥15起送</span>
                            <span>|</span>
                            <span>￥3配送</span>
                        </div>
                    </div>
                </div>
<!--                <div><p style="font-size: 13px;color: gray;border: 0.5px solid gray">各种面团</p></div>-->
            </div>
            <div  style="flex: 1.5;display: flex;flex-flow: column;justify-content: space-between">
                <div class="goods-right" style="display: flex;flex-flow: column;justify-content: space-between;width: 100%;height: 100%;align-items: flex-end">
                    <div style="flex: 1;margin-right: 15px">
                        <i class="el-icon-mobile" style="font-size: 12px"></i>
                    </div>
                    <div style="font-size: 12px;background-color: dodgerblue;color: white;width: 50px;flex: 1;margin-right: 8px">蜂鸟专送</div>
                    <div style="font-size: 12px;flex: 1;color: gray;margin-right: 8px">
                        <span>3.22km</span><span>|</span><span>30分钟</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="goods-bottom">
            <div style="flex: 1"></div>
            <div style="flex: 2.5;display: flex;flex-flow: column;justify-content: space-around">
                <div>
                    <span style="width: 12px;background-color: #42b983;color: white">新</span>
                    <span style="margin-left: 7px">饿了么新用户首单立减9元</span>
                </div>
                <div>
                    <span style="width: 12px;background-color: red;color: white">特</span>
                    <span style="margin-left: 7px">特价商品五元起</span>
                </div>
            </div>
            <div style="flex: 1.5;display: flex;justify-content: flex-end;">
                <p style="margin-right: 8px">两个活动<i class="el-icon-caret-bottom"></i></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goods"
    }
</script>

<style scoped>
    .goods-wrapper{
        height: 150px;
        width: 375px;
    }
    .goods-top{
        height: 70px;
        width: 100%;
        display: flex;
    }
    .goods-img img{
        width: 70px;
        height: 70px;
    }
    .goods-bottom{
        height: 45px;
        width: 100%;
        display: flex;
        font-size: 12px;
        color: gray;
        margin-top: 10px;
    }
</style>
